<template>
  <div class="index_four">
    <div class="container pr">
      <div class="index_top clearfix">
        <div class="fl left clearfix">
          <span class="hot fl">HOT</span>
          <span class="hot_text fl">热门团队</span>
        </div>
        <ul class="clearfix fl">
          <li
            @click="tab(index)"
            v-for="(item, index) in content"
            :key="item.index"
            :class="{ active: index === curId }"
          >
            <a href="javacript:;" class="bl">{{ item.name }}</a>
          </li>
        </ul>
        <div class="fr right">
          <router-link to="/hotteamlist"
            >全部<i class="iconfont icon-show_more-copy"></i
          ></router-link>
        </div>
      </div>
      <div class="sum index_bot">
        <div
          v-show="index === curId"
          :key="content.index"
          v-for="(content, index) in content"
        >
          <swiper :options="swiperFour" ref="mySwiper">
            <swiper-slide
              class="activity"
              v-for="(neirong, d) in content.list"
              :key="d"
            >
              <div>
                <router-link :to="'/hotteamshow/' + neirong.id" class="bl over"
                  ><img :src="$api + neirong.image" class="w100" alt=""
                /></router-link>
                <div class="content">
                  <router-link
                    :to="'/hotteamshow/' + neirong.id"
                    class="bl name line1"
                    >{{ neirong.name }}
                  </router-link>
                  <div class="text line2" v-html="neirong.content"></div>
                  <div class="address text">
                    <i class="iconfont icon-renyuan"></i>成员人数:{{
                      neirong.join_num
                    }}
                  </div>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <el-empty description="暂无数据" v-if="content.list < 0"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperFour: {
        slidesPerColumnFill: "row",
        slidesPerView: 4,
        spaceBetween: 26,
        observer: true,
        observeParents: true,
        breakpoints: {
          990: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          767: {
            slidesPerView: 1,
            spaceBetween: 15,
            slidesPerColumn: 1,
            pagination: {
              el: ".index_four .swiper-pagination",
              clickable: true,
            },
          },
        },
      },
      curId: 0,
      erji: [],
      content: [],
    };
  },

  methods: {
    tab(index) {
      this.curId = index;
    },
    getErji() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/team/select")
        .then(function (response) {
          that.erji = response.data.data;
          // //console.log(that.erji);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    // 热门团队
    getHotTeam() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/index/hotteam?type=")
        .then(function (response) {
          that.content = response.data.data;
          //console.log(that.content);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
  created() {
    this.getErji();
    this.getHotTeam();
  },
};
</script>

<style lang="less" scoped>
.line2 {
  height: 3.75rem;
}
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}

.index_top li a {
  color: #848484;
}
.index_top li {
  font-size: 1rem;
  line-height: 1.875rem;
  color: #848484;
  margin-left: 2.1875rem;
  padding: 0 0 0.5rem 0 !important;
  height: auto;
  position: relative;
  float: left;
}
.index_top li::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #19a15f;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.index_top li.active a,
.index_top li:hover a {
  color: #19a15f;
}
.index_top li.active::before,
.index_top li:hover::before {
  width: 100%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.index_top {
  margin-bottom: 2.5rem;

  .left {
    .hot {
      width: 3.875rem;
      line-height: 2.0625rem;
      background-color: #de5044;
      border-radius: 4px 0 4px 4px;
      position: relative;
      font-size: 1rem;
      color: #ffffff;
      text-align: center;
    }

    .hot::before {
      content: "";
      position: absolute;
      top: 0;
      right: -0.5rem;
      width: 0;
      height: 0;
      border-top: 0.5rem solid #de5044;
      border-right: 0.5rem solid transparent;
    }

    .hot_text {
      font-size: 1.75rem;
      line-height: 1.75rem;
      margin-left: 0.9375rem;
    }

    ul li {
      float: left;
      font-size: 1rem;
      line-height: 1.875rem;
      color: #848484;
      margin-left: 2.1875rem;
    }

    ul li a {
      position: relative;
      padding-bottom: 0.25rem;
    }

    ul li a::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: #de5044;
      transition: all 0.4s;
      -webkit-transform: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
    }

    ul li.active,
    ul li:hover {
      a {
        color: #000;
      }

      a::before {
        width: 100%;
        transition: all 0.4s;
        -webkit-transform: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
      }
    }
  }

  .right {
    a {
      color: #848484;
    }

    font-size: 1rem;
    line-height: 2.2rem;
    .iconfont {
      font-size: 1rem;
    }
  }

  .right:hover {
    a {
      color: #4c8bf5;
    }
  }
}

.index_four .left .hot,
.index_four .left ul li a::before {
  background-color: #19a15f;
}

.index_four .left .hot::before,
.list_team .left .hot::before {
  border-top: 0.5rem solid #19a15f;
}

.index_four .activity > div:hover,
.list_team .activity > div:hover {
  border-color: #19a15f;
}

.index_four .activity > div:hover .name,
.list_team .activity > div:hover .name,
.index_four .activity .address i,
.list_team .activity .address i {
  color: #19a15f;
}
.index_four {
  padding: 3.75rem 0;
  background-color: #f7f8fa;
}

.index_top .left ul li a {
  color: #000 !important;
}
@media (max-width: 1200px) {
  .index_top li,
  .el-tabs__item {
    margin-left: 15px;
  }
  .index_top .left .hot_text {
    font-size: 26px;
    line-height: 30px;
  }
}
@media (max-width: 990px) {
  .index_four ul {
    width: 100%;
    margin-top: 15px;
  }
  .index_four li:nth-child(1) {
    margin-left: 0;
  }
  .index_four {
    position: relative;
  }
  .index_four .right {
    position: absolute;
    top: 0;
    right: 0;
  }
  .index_top {
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .index_four .swiper-container {
    padding-bottom: 35px;
  }
  .index_four {
    padding: 25px 0;
  }
  .index_four .swiper-pagination {
    bottom: 0;
  }
 
}
</style>
